<template>
	<a-modal :title="`${dictionaryInfo.name} 键值对列表:`" :maskClosable="false" @cancel="closeSelf"
	 :width="800" :visible="mxVisible" destroyOnClose>
		<a-table bordered :pagination="pagination" :dataSource="dataSource" :columns="columns" :rowKey="record => record.id"
		 :loading="loading" @change="handleTableChange">
	 
			<template slot="operation" slot-scope="text, record">
				<a @click="openMxEdit(record)">编辑</a>
				<a-divider type="vertical" />
				<a-popconfirm title="确定要删除这个字典选项吗?" @confirm="() => delDictmx(record)">
					<span><a href="javascript:;">删除</a>
					
					
					</span>
					
				</a-popconfirm>
			</template>
		</a-table>
		<!-- 模态框Footer-->
		<template slot="footer">
			<a-button type="primary" icon="plus" @click="openMxEdit">新增选项</a-button>
			<a-button key="submit" @click="closeSelf">关闭</a-button>
		</template>
		<!-- 编辑器模态框  -->
		<MxEdit v-if="editShow"  :dictionaryCode="dictionaryInfo.code"  :editRecord="editRecord" @closeFun="closeEdit" />
	</a-modal>
</template>
<script>
	 
	import {dictionaryMxList,dictionaryMxDel} from   '../public/http.js';
	import {dictmxTable,pagination} from  '../public/columns.js';
	export default {
		
		components: {
			MxEdit: resolve => {
				require(['./MxEdit.vue'], resolve);
			}
		
		 
		},
 
		props: ['dictionaryInfo'],
		data() {
			return {
				mxVisible: true, //模态框可见
				editShow: false, //编辑器模态框可见状态
				editRecord: {}, //需要进行修改的
				loading: false,
				dataSource: [],
				columns: dictmxTable,
				pagination: {...pagination},
				// 查询参数
				where: {code: this.dictionaryInfo.code}
			};
		},
		methods: {
			// 删除明细字段
			delDictmx(record) {
				dictionaryMxDel(record.id).then(res => {
					
					if (res.code == 0) {
						//根据代code移除store里面的字段缓存
						this.$store.commit('delDict', record.code);
						this.$notification.success({
							message: '操作成功',
							description: res.message,
						});
						this.pagination.current = 1;
						this.getTableList();
					}
				});
			},
			// 打开编辑器
			openMxEdit(obj={}) {
				this.editRecord =obj;
				this.editShow = true;
			},
			//翻页监听
			handleTableChange(pagination) {
				this.pagination.current = pagination.current;
				this.pagination.pageSize = pagination.pageSize;
				this.getTableList();
			},
			//表格数据加载
			getTableList() {
				this.loading = true;	
				dictionaryMxList(this.pagination,this.where).then(res => {
					this.loading = false;
					if (res.code === 0) {
						this.dataSource = res.data.result; //表格数据
						this.pagination .total = res.data.total; //总条数						 
					}
				});
			},
			//接受编辑器Modal关闭事件
			closeEdit(e) {
				this.editShow = false;
				if (e.render) {
					//第一页开始 重载表格
					this.pagination.current = 1;
					this.getTableList();
				}
			},
			//关闭本身的弹窗事件
			closeSelf(d) {
				//关闭当前弹窗
				this.mxVisible = false;
				//通知父组件释放显示属性
				this.$emit('closeMxFun', false);
			},
			//数据初始化
			async init() {	 
				//弹窗页面 微调一次分页数量
				this.pagination.pageSize=5;
				this.getTableList();
			}
		},
		
		created() {
			this.init();
		}
	};
</script>
